<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frpc-GUI</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <form id="form">
            <div class="f-left">
                <div id="common-conf">

                </div>
                <div id="add-conf" style="margin-top: 20px">
                    <div class="box">
                        <p class="box-title">添加新配置</p>
                        <div class="form-group">
                            <span>名称</span>
                            <input type="text" name="tagname" value="" placeholder="请填写配置名称">
                        </div>
                        <div class="form-group">
                            <span>域名</span>
                            <input type="text" name="custom_domains" value="" placeholder="请填写自定义域名">
                        </div>
                        <div class="form-group">
                            <span>IP</span>
                            <input type="text" name="local_ip" value="127.0.0.1" placeholder="请填写本地IP">
                        </div>
                        <div class="form-group">
                            <span>端口</span>
                            <input type="text" name="local_port" value="80" placeholder="请填写本地端口">
                        </div>
                        <div class="form-group">
                            <span>协议</span>
                            <input type="text" name="type" value="http" placeholder="请填写协议类型">
                        </div>
                        <div class="op-box">
                            <button type="button" id="btn-add">添加</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="f-right">
                <div id="form-list">

                </div>
                <div id="op-box">
                    <button type="button" id="btn-start">正在检测运行状态...</button>
                </div>
            </div>
        </form>        
    </div>
</body>
<script type="text/javascript">
    $(document).ready(function(){ 
        $(document).bind("contextmenu",function(e){ 
            return false; 
        }); 
    });
    let conf = {};
    let pid = 0;
    (async () => {
        try {
            checkStatus();
            conf = await getConf();            
        } catch (error) {
            conf = `{"common":{"log_file":"./frpc.log","log_max_days":"3","server_addr":"47.105.122.39","server_port":"7654","token":"88468560"},"crm-http":{"custom_domains":"crm.frp.fatediy.cn","local_ip":"127.0.0.1","local_port":"80","type":"http"},"tthelper-http":{"custom_domains":"tthelper.frp.fatediy.cn","local_ip":"127.0.0.1","local_port":"80","type":"http"},"yunduo-http":{"custom_domains":"yunduo.frp.fatediy.cn","local_ip":"127.0.0.1","local_port":"80","type":"http"},"yunduo-https":{"custom_domains":"yunduo.frp.fatediy.cn","local_ip":"127.0.0.1","local_port":"443","type":"https"}}`;
            conf = JSON.parse(conf);    
        }
        init(conf);
        initEvent();
    })()

    async function checkStatus(){
        pid = await checkProcess();
        if(pid){
            $("#btn-start").text(`运行中(${pid})`);
        }else{
            $("#btn-start").text(`启动`);
        }
        console.log(pid);
    }

    function initEvent(){
        $("#form").on('click',".btn-del",async function(){
            let res = await confirm("确定删除吗? ");
            if(res){
                let column = $(this).attr('data-column');
                del(column);    
                conf = await getConf();
                init(conf);
                let msg = "已删除";
                if(pid){
                    msg = "已重载";
                    hotReload();
                }
                ok(msg);
            }
        })

        $("#form").on('click',".btn-save",async function(){
            let column = $(this).attr('data-column');            
            $.each(conf[column],function(i,v){
                let name = `row[${column}][${i}]`;
                conf[column][i] = $(`[name='${name}']`).val();
            })
            await save(column,conf[column]);
            let msg = "已保存";
            if(pid){
                msg = "已重载";
                hotReload();
            }
            ok(msg);
        })

        $("#form").on('click',"#btn-add",async function(){              
            let column = $(`[name='tagname'`).val();
            if(conf[column]){
                alert(`已存在名为 ${column} 的配置,请更换名称后重试`);
                return;
            }
            let info = {
                custom_domains: $(`[name='custom_domains']`).val(),
                local_ip: $(`[name='local_ip']`).val(),
                local_port: $(`[name='local_port']`).val(),
                type: $(`[name='type']`).val(),
            };                    
            await save(column,info);
            conf = await getConf();
            init(conf);
            let msg = "已添加";
            if(pid){
                msg = "已重载";
                hotReload();
            }
            ok(msg);
        })

        $("#form").on('click',"#btn-start",async function(){            
            if(pid){
                let res = await confirm("确定结束吗? ");
                console.log(res);
                if(res){
                    await start(pid);
                    pid = 0;
                    $("#btn-start").text(`启动`);
                }
            }else{
                let res = await start();
                checkStatus();
            }
        })
    }

    function init(json){
        $("#common-conf").empty();
        $("#form-list").empty();
        
        $.each(json,function(i,v){
            // let title = i=='common' ? '通用配置':'映射站点';
            let title = __(i);
            let hidedel = i=='common' ? 'hidden':'';
            let box = `
            <div class="box">
                <p class="box-title">${title}</p>
                <div class="box-op">
                    <div class="btn-del ${hidedel}" title="删除站点" data-column="${i}">x</div>
                    <div class="btn-save" title="保存" data-column="${i}">√</div>
                </div>
            `;
            $.each(v,function(ii,vv){
                // if(ii == 'token') return; // 隐藏token配置
                box += `
                <div class="form-group">
                    <span>${__(ii)}</span>
                    <input type="text" name="row[${i}][${ii}]" value="${vv}">
                </div>
                `;
            })
            box += `</div>`;
            if(i == 'common'){
                $("#common-conf").append(box);                
            }else{
                $("#form-list").append(box);
            }
            
        })
        
    }
    function __(key){        
        let lang = {
            'admin_port': '管理端口',
            'server_addr':'服务器地址',
            'log_file':'日志文件名',
            'log_max_days':'日志天数',
            'server_port':'服务器端口',
            'token':'授权密钥',
            'custom_domains':'自定义域名',
            'local_ip':'本地IP',
            'local_port':'本地端口',
            'type':'协议类型',
            'common':'全局配置'
        }
        if(lang[key]){
            return lang[key];
        }else{
            return key;
        }
    }
</script>
</html>